<script setup lang="ts">
import {useI18n} from 'vue-i18n'
import {useRouteCacheStore} from '@/stores'

const {t} = useI18n()

useHead({
  // title: () => t('app.name'),
  title: () => `房屋回收报名系统`,
  meta: [
    {
      name: 'description',
      content: () => t('app.description'),
    },
    {
      name: 'theme-color',
      content: () => isDark.value ? '#0B0A0A' : '#ffffff',
      // content: () => '#ffffff',
    },
  ],
  link: [
    {
      rel: 'icon',
      type: 'image/svg+xml',
      href: () => preferredDark.value ? '/favicon-dark.svg' : '/favicon.svg',
    },
  ],
})

const routeCacheStore = useRouteCacheStore()

const keepAliveRouteNames = computed(() => {
  return routeCacheStore.routeCaches
})

const mode = computed(() => {
  // return isDark.value ? 'dark' : 'light'
  return 'light'
})

const showNavBar = computed(() => {
  return import.meta.env.VITE_APP_PLANT !== 'yxf'
})
</script>

<template>
  <van-config-provider theme="light">
    <div w-full h-dvh flex flex-col>
      <!--      <nav-bar v-if="showNavBar" />-->
      <div flex-1 min-h-0>
        <router-view v-slot="{ Component }">
          <section class="app-wrapper">
            <keep-alive :include="keepAliveRouteNames">
              <component :is="Component"/>
            </keep-alive>
          </section>
        </router-view>
      </div>

      <!--      <div mt-auto>-->
      <!--        <tab-bar />-->
      <!--      </div>-->

    </div>
  </van-config-provider>
</template>

<style scoped>
.app-wrapper {
  width: 100%;
  height: 100dvh;
  box-sizing: border-box;

  position: relative;
  overflow-y: scroll;

  padding-bottom: constant(safe-area-inset-bottom); /* 兼容旧版 iOS */
  padding-bottom: env(safe-area-inset-bottom);

}
</style>
